import React, { useState, useEffect } from 'react';
import { Pagination } from 'antd';
import { formatCount } from '@/utils/format.js';
import axios from '@/utils/axios.js';
import { useHistory } from 'react-router-dom';
import CustomIcon from '@/components/CustomIcon';
import s from './style.less';

const MVs = () => {
  // 区域列表
  const [areas, setAreas] = useState(['全部', '内地', '港台', '欧美', '日本', '韩国']);
  const [areaIndex, setAreaIndex] = useState(0);
  // 类型列表
  const [types, setTypes] = useState(['全部', '官方版', '原声', '现场版', '网易出品']);
  const [typeIndex, setTypeIndex] = useState(0);
  // 排序列表
  const [orders, setOrders] = useState(['上升最快', '最热', '最新']);
  const [orderIndex, setOrderIndex] = useState(0);
  // 每页数据
  const [limit, setLimit] = useState(12);
  // 页码
  const [page, setPage] = useState(1);
  // 总条数
  const [total, setTotal] = useState(0);
  // mv列表数据
  const [mvList, setMvList] = useState([]);

  const history = useHistory();

  useEffect(() => {
    getMvListData();
  },[limit,page,total]);

  const getMvListData = async () => {
    const res = await axios.get('/mv/all', {
      params: {
        area: areas[areaIndex],
        type: types[typeIndex],
        order: orders[orderIndex],
        offset: (page - 1) * 12,
        limit: 12
      }
    })
    if (res.data.code === 200) {
      setMvList(res.data.data);
      setTotal(res.data.count || total);
    }
  }

  const changeArea = (index) => {
    setAreaIndex(index);
    setPage(1);
    getMvListData();
  }

  const changeType = (index) => {
    setTypeIndex(index);
    setPage(1);
    getMvListData();
  }

  const changeOrder = (index) => {
    setOrderIndex(index);
    setPage(1);
    getMvListData();
  }

  const onChange = (page) => {
    setPage(page);
    getMvListData();
  }

  const toMv = (id) => {
    history.push(`/mv/${id}`);
  }

  const renderCondition = () => {
    return (
      <div className={s.filterWrap}>
        <div className={s.sectionWrap}>
          <span className={s.sectionType}>地区：</span>
          <ul className={s.tabsWrap}>
            {areas.map((item, index) => {
              return (
                <li className={s.tab} key={item}>
                  <span
                    className={index === areaIndex ? s.titleActive : s.title}
                    onClick={() => changeArea(index)}
                  >
                    {item}
                  </span>
                </li>
              )
            })}
          </ul>
        </div>
        <div className={s.sectionWrap}>
          <span className={s.sectionType}>类型：</span>
          <ul className={s.tabsWrap}>
            {types.map((item, index) => {
              return (
                <li className={s.tab} key={item}>
                  <span
                    className={index === typeIndex ? s.titleActive : s.title}
                    onClick={() => changeType(index)}
                  >
                    {item}
                  </span>
                </li>
              )
            })}
          </ul>
        </div>
        <div className={s.sectionWrap}>
          <span className={s.sectionType}>排序：</span>
          <ul className={s.tabsWrap}>
            {orders.map((item, index) => {
              return (
                <li className={s.tab} key={item}>
                  <span
                    className={index === orderIndex ? s.titleActive : s.title}
                    onClick={() => changeOrder(index)}
                  >
                    {item}
                  </span>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    )
  }

  const renderMvList = () => {
    return (
      <div className={s.items}>
        {
          mvList.map((item) => {
            return (
              <div
                key={item.id}
                className={s.item}
                onClick={() => toMv(item.id)}
              >
                <div className={s.imgWrap}>
                  <img src={item.cover} alt="" />
                  <div className={s.numWrap}>
                    <CustomIcon type="icon-play" className={s.iconPlay} />
                    <div className={s.num}>{formatCount(item.playCount)}</div>
                  </div>
                </div>
                <div className={s.infoWrap}>
                  <div className={s.name}>{item.name}</div>
                  <div className={s.singer}>{item.artistName}</div>
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }

  const renderPagination = () => {
    return (
      <div className={s.pagination}>
        <Pagination
          current={page}
          onChange={onChange}
          total={total}
          pageSize={limit}
          showSizeChanger={false}
        />
      </div>
    )
  }

  return (
    <div className={s.mvsContainer}>
      {/* 渲染条件 */}
      {renderCondition()}
      {/* 渲染列表内容和分页条 */}
      <div className={s.mvs}>
        {/* mv列表 */}
        {renderMvList()}
        {/* 分页条 */}
        {renderPagination()}
      </div>
    </div>
  )
}

export default MVs;